<!--

@file: OtherPage04.vue
@author: pan
-->
<script lang="ts">
export default {
  name: 'OtherPage04',
}
</script>
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { useFour } from '@/utils/UseUtils04'
import { Component as VueComponent } from 'vue'
import { defineAsyncComponent, shallowRef } from 'vue'

function onClick() {
  ElMessage({
    message: 'Congrats, this is a success message.',
    type: 'success',
  })
}
const HelloWorld = defineAsyncComponent(() => import('./HelloWorld.vue'))
const HelloWorld2 = defineAsyncComponent(() => import('./HelloWorld2.vue'))
console.log(useFour())

const compName = shallowRef<any>()

function onClickTwo() {
  compName.value = HelloWorld
}
function onClickThree() {
  compName.value = HelloWorld2
}

const compMap = new Map<string, VueComponent>()
const mockFiles = import.meta.glob('./batch-reg/*.vue', {
  eager: true,
  import: 'default',
})
Object.keys(mockFiles).forEach(key => {
  const defaultObj = mockFiles[key]
  //@ts-ignore
  compMap.set(defaultObj.name, defaultObj)
})
</script>

<template>
  <button @click="onClickTwo">加载HelloWorld组件</button>
  <button @click="onClickThree">加载HelloWorld2组件</button>
  <div>OtherPage04</div>
  <div>OtherPage04</div>
  <div>OtherPage04</div>
  <div>OtherPage04</div>
  <div>OtherPage04</div>
  <div>OtherPage04</div>
  <div>OtherPage04</div>
  <div>OtherPage04</div>
  <div>OtherPage04</div>
  <div>OtherPage04</div>
  <div>OtherPage04</div>
  <div>OtherPage04</div>
  <div>OtherPage04</div>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="@/assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <el-button type="primary" @click="onClick">按钮</el-button>
  <SvgIcon name="vue"></SvgIcon>
  <hr />
  <component :is="compName" v-if="compName"></component>

  <hr />
  <component :is="compMap.get('Demo01')"></component>
  <hr />
  <component :is="compMap.get('Demo02')"></component>
</template>

<style lang="scss" scoped></style>
